<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p.hide{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" >
        <!--数据监听-->
        <input type="text" v-model="msg">
        <p>{{ msg }}</p>
        <!--绑定class 和click事件-->
        <button @click="show" >{{ bnv }}</button>
        <button @click="addTeacher" >add teacher</button>
        <p v-bind:class="{hide:isHide}">你好，我出来了</p>
        <!--for ,if -->
        <p v-if="!isHide">hello,I come back</p>
        <!--绑定class 和click事件-->
        <p v-show="!isHide">hello,I can come back</p>
        <ul>
            <li v-for="(item,index) in teachers">
                {{ index + 1 }} {{ item  }}</li>
        </ul>
        <!--
            v-on @     绑定事件
            v-model   绑定数据
            v-for     循环
            v-bind ：   绑定属性
            v-if      是否显示（dom）
            v-show    是否显示 （display）
        -->
        <div v-html="hello"></div>
        <br>
        <hr>
        <!--axios http request-->
        <button @click="getBooks" >List all Book</button>
         <ul>
            <li v-for="(item,index) in books">
                {{ index + 1 }} {{ item  }}</li>
        </ul>

    </div>
    <script src="../static/js/vue.js"></script>
    <script src="../static/js/axios.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:'',
                bnv:'come out',
                isHide:true,
                teachers:[
                    "fast" ,
                    "slow" ,
                    "Dame" ,
                    "女神" ,
                ],
                hello:"<strong>helloworld</strong>",
                appDomain:"http://127.0.0.1:8000/api/v2/",
                books:[]
            },
            methods:{
                show(){
                    this.isHide = !this.isHide
                    this.bnv = this.isHide?"come out":"come into"
                },
                addTeacher(){
                    this.teachers.push(this.msg)
                },
                getBooks(){
                    let self = this
                    axios.get(this.appDomain+'book/')
                        .then(function (response) {
                            // handle success
                            self.books = response.data.data
                      })
                      .catch(function (error) {
                            // handle error
                            console.log(error);
                      })
                      .then(function () {
                            // always executed
                      });
                }
            }
        })
    </script>
</body>
</html>